<script setup lang="ts">
import {onMounted, ref} from "vue";
import {query,editStatus,editShowLink,deleteById} from "@/api/permission/permission"
import SaveMenu from "./SaveMenu.vue"
import {ElMessage} from "element-plus";
import EditMenu from "./EditMenu.vue";
import {Edit,Delete} from '@element-plus/icons-vue'
const tableData = ref()

async function initData() {
  let rs = await query()
  if (rs.code == 200) {
    tableData.value = rs.data
  }
}
const isShow=ref(false)
const issShow=ref(false)
const updateRef = ref()
function update(row){
  issShow.value = true;
  updateRef.value.init(row)
}
async function changeStatus(row){
  let data = {
    id:row.id,
    status:row.status
  }
 let rs = await editStatus(data)
  if (rs.code==200){
    ElMessage({
      message: "修改成功",
      type: "success"
    });
  }
}
async function changeShowLink(row){
  let data = {
    id:row.id,
    showLink:row.showLink
  }
  let rs = await editShowLink(data)
  if (rs.code==200){
    ElMessage({
      message: "修改成功",
      type: "success"
    });
  }
}
async function deletePer(id){
  let rs = await deleteById(id)
  if (rs.code==200){
    ElMessage({
      message:"删除成功",
      type:"success"
    })
    initData()
  }
}
onMounted(() => {
  initData()
})
</script>

<template>
  <div>

    <div
      style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
      <span style="font-size: 12px;margin-left: 20px">菜单列表</span>
      <!--工具条-->
      <div class="toolbar">
        <el-button type="primary" size="small" style="background-color: #60BFAE;border: #60BFAE" @click="isShow=true">新增菜单</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :indent="20"
    >
      <el-table-column type="index" prop="date" label="序号" align="center" header-align="center" width="80"/>
      <el-table-column prop="menuName" label="菜单名称" align="center" header-align="center" width="200"/>
      <el-table-column prop="icon" label="图标" align="center" header-align="center"/>
      <el-table-column prop="category" label="菜单类型" align="center" header-align="center">
        <template v-slot="{row}">
          <el-tag v-if="row.category==1">功能模块</el-tag>
          <el-tag v-else-if="row.category==2">功能页面</el-tag>
          <el-tag v-else-if="row.category==3">功能按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="访问路径" align="center" header-align="center"/>
      <el-table-column prop="name" label="路由名称" align="center" header-align="center"/>
      <el-table-column prop="component" label="组件路径" align="center" header-align="center"/>
      <el-table-column prop="auth" label="权限标识" align="center" header-align="center"/>
      <el-table-column prop="showLink" label="是否显示" align="center" header-align="center">
        <template v-slot="{row}">
          <el-tooltip effect="dark" content="只可修改二级菜单" placement="top-start">
          <el-switch
            v-if="row.category==2"
            v-model="row.showLink"
            class="ml-2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="changeShowLink(row)"
          />
          <el-switch
            v-else-if="row.category!=2"
            v-model="row.showLink"
            class="ml-2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            :active-value="1"
            :inactive-value="0"
            disabled
          />
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="parentId" label="上级菜单" align="center" header-align="center"/>
      <el-table-column prop="sorts" label="排序" align="center" header-align="center" width="55"/>
      <el-table-column prop="status" label="状态" align="center" header-align="center">
        <template v-slot="{row}">
          <el-switch
            v-model="row.status"
            class="ml-2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" header-align="center" width="160">
        <template v-slot="{row}">
          <el-button type="primary" :icon="Edit" circle @click="update(row)"/>
          <el-popconfirm title="确定要删除该菜单吗？" @confirm="deletePer(row.id)">
            <template #reference>
          <el-button type="danger" :icon="Delete" circle/>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <SaveMenu :visible="isShow" @close="isShow = false" @refresh="initData"></SaveMenu>
    <EditMenu :visible="issShow" @close="issShow=false" @refresh="initData" ref="updateRef"></EditMenu>
  </div>
</template>

<style scoped lang="scss">
.toolbar {
  float: right;
}
</style>
